<template>
  <div class="container">
    <el-card v-loading='loading'>
      <!-- 筛选框 -->
      <div class="select">
        <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="21">
          <div class="left">
            <span class="select-text">关键字</span>
            <el-input style="width: 200px" v-model="reqRandoms.keyword"> </el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="right">
            <el-button size="mini" @click="clean">清除</el-button>
            <el-button size="mini" type="primary" @click="select">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      </div>
      <!-- 表格 -->
     <div class="table">
        <!-- 弹窗 -->
       <el-alert
        :title="alertTitle"
        type="info"
        :closable="false"
        show-icon
        >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="randomsList" style="width:100%" class="table">
        <el-table-column label="编号" width="190">
          <template #default='{row}'>
            <span>{{row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型" width="80"  :formatter='formatterIDs' prop="questionType">
        </el-table-column>
        <el-table-column label="题目编号" width="250" >
          <template #default='{row:{questionIDs}}'>
            <el-link
            :underline='false'
            type='primary'
            v-for="(item,index) in questionIDs"
             :key="index"
             @click="clickShowDialog(item.id)"
             >{{item.number}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template #default='{row}'>
            <span>{{row.addTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="答题时间(s)">
          <template #default='{row}'>
            <span>{{row.totalSeconds}}</span>
          </template>
        </el-table-column>
        <el-table-column label="正确率(%)">
          <template #default='{row}'>
            <span>{{row.accuracyRate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人">
          <template #default='{row}'>
            <span>{{row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default='{row}'>
             <el-button
             type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
       background
      :current-page="reqRandoms.page"
      :page-sizes="[10,15,20]"
      :page-size="reqRandoms.pagesize"
      :total="total"
      layout=" prev, pager, next, sizes, jumper"
      >
    </el-pagination>
      </div>
     </div>
    </el-card>
    <!-- 预览对话框 -->
  <Preview ref="preview" :questionID='questionID' >

  </Preview>
  </div>
</template>

<script>
import Preview from './../components/questions-preview-new.vue'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants.js'
export default {
  name: 'questions-randoms',
  components: {
    Preview
  },
  data () {
    return {
      randomsList: [],
      loading: false,
      total: 0,
      reqRandoms: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      questionID: 0
    }
  },
  computed: {
    alertTitle () {
      const title = `数据共${this.total}条`
      return title
    }
  },
  created () {
    this.getRandomsList()
    // this.formatterIDs()
  },
  methods: {
    // 获取列表信息
    getRandomsList () {
      this.loading = true
      // const res = await reqGetRandomsList()
      randoms(this.reqRandoms).then(data => {
        this.randomsList = data.data.items
        this.total = data.data.counts
        // questionType.forEach(item => {
        //   if (item.value === +this.data.questionType) {
        //     this.data.questionType = item.label
        //   }
        // })
        this.loading = false
      }).catch(e => {

      })
    },
    formatterIDs (row, column, cellValue, index) {
    //  cellValue 单元格原本的值
    // 匹配对应返回类型编号，匹配到常量文件中对应的类型
      const type = questionType.find(item => item.value === +cellValue)
      // console.log(type)
      return type.label || '未知'
    },
    handleSizeChange (val) {
      // 每页val条
      this.reqRandoms.pagesize = val
      this.reqRandoms.page = 1
      // 渲染页面
      this.getRandomsList()
    },
    handleCurrentChange (val) {
      // 第val页
      this.reqRandoms.page = val
      // 渲染页面
      this.getRandomsList()
    },
    // 清除筛选框信息
    clean () {
      this.reqRandoms.keyword = ''
    },
    // 筛选功能
    select () {
      // console.log(1)
      this.reqRandoms.page = 1
      this.getRandomsList()
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.$message.success('删除成功！')
        // 优化
        if (this.randomsList.length === 1 && this.reqRandoms.page > 1) {
          this.reqRandoms.page--
        }
        // console.log(res)
        // 重新渲染页面
        this.getRandomsList()
      }).catch(() => {
        this.$message.info('已取消！')
      })
    },
    // 点击题目编号打开对话框
    clickShowDialog (id) {
      // 注意传值为id而非编号
      this.questionID = id
      this.$nextTick(() => {
        this.$refs.preview.openDialog()
      })
      // console.log(id)
    }

  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
  .select{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    .select-text{
      margin-right: 10px;
    }
  }
  .table{
    .pagination{
      display: flex;
      justify-content: right;
    }
  }
}
</style>
